<template>
  <view class="container">
    <view class="logo">
      <image
        :src="public_img + '/img/loginlogo.png'"
        mode=""
      ></image>
    </view>
    <view class="login">
      <view class="login-form">
        <view class="login-item">
          <uni-icons type="person" size="30"></uni-icons>
          <input
            class="login-input"
            placeholder="请输入手机号"
            v-model="username"
            @input="onUsernameInput"
          />
        </view>
        <view class="login-item">
          <uni-icons type="locked" size="30"></uni-icons>
          <input
            class="login-input"
            placeholder="请输入密码"
            password
            v-model="password"
          />
        </view>
        <view class="login-item">
          <uni-icons type="locked" size="30"></uni-icons>
          <input
            class="login-input"
            placeholder="请再次输入密码"
            password
            v-model="confirmPassword"
          />
        </view>
      </view>
      <view class="login-btn">
        <button class="login-submit" @click="handleRegister">注册</button>
      </view>
      <view class="login-forget">
        <text class="login-forget-btn" @click="goToLogin"
          >已有账号？前往登录</text
        >
      </view>
    </view>

    <view class="elselogin">
      <text class="elselogin-submit">其他登录方式</text>
      <image
        :src="public_img + '/img/wx.png'"
        mode="scaleToFill"
        @click="showPopup = true"
        class="wechat-icon"
      />
    </view>

    <text class="copyright">@此版权为大喇叭编程实训基地所有</text>
  </view>
</template>

<script>
// 引入全局配置
import { public_api, public_img } from '@/static/public.js';

export default {
  data() {
    return {
      username: "",
      password: "",
      confirmPassword: "",
      // 基础URL
      baseUrl: public_api, // 使用全局配置
      // 第三方图片服务
      third_party_img: third_party_img
    };
  },
  methods: {
    // 用户名输入框输入事件处理（手机号）
    onUsernameInput(e) {
      // 过滤掉汉字输入
      const value = e.detail.value;
      // 只允许数字输入
      const filteredValue = value.replace(/[^\d]/g, '');
      
      // 如果过滤后的值与原值不同，说明输入了非数字字符
      if (filteredValue !== value) {
        this.username = filteredValue;
        // 提示用户只能输入数字
        uni.showToast({
          title: '手机号只能包含数字',
          icon: 'none',
          duration: 1000
        });
      } else {
        // 限制手机号长度为11位
        if (filteredValue.length <= 11) {
          this.username = filteredValue;
        } else {
          this.username = filteredValue.substring(0, 11);
          uni.showToast({
            title: '手机号长度不能超过11位',
            icon: 'none',
            duration: 1000
          });
        }
      }
    },
    
    handleRegister() {
      // 表单验证
      if (!this.username) {
        uni.showToast({
          title: "请输入手机号",
          icon: "none",
        });
        return;
      }

      // 手机号格式验证
      const phoneReg = /^1[3-9]\d{9}$/;
      if (!phoneReg.test(this.username)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return;
      }

      if (!this.password) {
        uni.showToast({
          title: "请输入密码",
          icon: "none",
        });
        return;
      }

      if (this.password !== this.confirmPassword) {
        uni.showToast({
          title: "两次输入的密码不一致",
          icon: "none",
        });
        return;
      }

      // 注册过程
      uni.showLoading({
        title: "注册中...",
      });

      // 调用注册接口
      uni.request({
        url: this.baseUrl + "/api/user/register",
        method: "POST",
        data: {
          username: this.username,
          password: this.password
        },
        success: (res) => {
          uni.hideLoading();
          
          if (res.statusCode === 200 && res.data.code === 1) {
            uni.showToast({
              title: "注册成功",
              icon: "success",
            });
            
            // 注册成功后延迟跳转到登录页
            setTimeout(() => {
              this.goToLogin();
            }, 1500);
          } else {
            uni.showToast({
              title: res.data.msg || "注册失败",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          uni.hideLoading();
          console.error("注册请求失败", err);
          uni.showToast({
            title: "网络请求失败，请检查网络连接",
            icon: "none",
          });
        }
      });
    },

    // 前往登录页面
    goToLogin() {
      uni.redirectTo({
        url: "/pages/login/login",
      });
    },
  },
  onLoad() {
    // 页面加载时的初始化操作
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.logo {
  width: 80%;
  margin-top: 100rpx;
  margin-bottom: 80rpx;

  image {
    width: 90%;
    height: 36vh;
    margin-left: 5%;
    margin-top: 4%;
  }
}

.login {
  width: 80%;
  background-color: #f1f1f1;
  border-radius: 20rpx;
  padding: 40rpx;

  .login-title {
    text-align: center;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
    color: #333;
  }

  .login-form {
    .login-item {
      margin-bottom: 30rpx;
      border: #666 solid 1px;
      padding: 0rpx 10rpx;
      border-radius: 40px;
      display: flex;
      align-items: center;

      .login-input {
        width: 80%;
        height: 80rpx;
        border: none;
        border-radius: 10rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
        font-size: 28rpx;
      }
    }
  }

  .login-btn {
    margin-top: 50rpx;

    .login-submit {
      width: 100%;
      height: 80rpx;
      background-color: #2a82e4;
      color: #fff;
      border-radius: 40rpx;
      font-size: 32rpx;
      border: none;
    }
  }

  .login-forget {
    text-align: center;
    margin-top: 20rpx;

    .login-forget-btn {
      font-size: 14px;
      color: #666;
      cursor: pointer;
    }
  }
}

.elselogin {
  width: 60%;
  margin-top: 40px;
  align-items: center;
  display: flex;
  justify-content: center;
  color: #666;
  font-size: 14px;

  image {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    cursor: pointer;
  }
}

.copyright {
  text-align: center;
  font-size: 12px;
  color: #666;
}
</style>
